<template>
	<view class="container">
		<view class="messageContent">
			<view class="messageCell" v-for='(item, index) in messageList' :key='index' :id="'msg'+item.id">
				<view class="main" :class="{isMyself : item.isSelf}">
					<view class="absolute-view" v-show="showIndex>index?'show-index':''"></view>
					<image class="avatarUrl" :src="item.befrom.avatarUrl" mode="aspectFill" @click="avatarTap(item.befrom)"></image>
					<view class="messageCont">{{item.content}}</view>
					
				</view>
			</view>
			<view class="greetBtn safeArea" @click='greetShow'>回复</view>
		</view>
		<!-- //留言 -->
		<leaveMessage ref="leaveMessage" @confirm='confirmLeaveMessage'></leaveMessage>
	</view>
</template>

<script>
	import {
		user
	} from '@/api/user.js'
	import {message} from '@/api/message.js'
	import messageCell from '@/components/conversationCell/messageCell.vue'
	import chatToolBar from '@/components/chatToolBar/chatToolBar.vue'
	import {uploadApi, upload_baseUrl} from '@/api/baseUrl.js'
	export default{
		components:{messageCell, chatToolBar},
		data() {
			return {
				upload_baseUrl: upload_baseUrl,
				page: 1,
				size: 50,
				isOver: false,
				conversationId: '',
				messageList: [],
				textMessage: '',
				greetList: [],
				showIndex:-1,
			}
		},
		onLoad(option) {
			this.conversationId = this.$Route.query.conversationId
			uni.setNavigationBarTitle({
				title: decodeURIComponent(this.$Route.query.nickname)
			})
			this.getMessageList()
			this.readMessage()
		},
		onPullDownRefresh() {
			if(this.page == 0) {
				uni.stopPullDownRefresh();
				return
			}
			this.getMessageList()
		},
		methods:{
			loadData(){
				this.getMessageList()
				this.readMessage()
			},
			greetShow(){
				this.$refs.leaveMessage.open(this.$Route.query.userId)
			},
			confirmLeaveMessage(item) {
				message.sendMessage({
					messageType: 'custom',
					contentType: 'text',
					userId: item.toUser,
					content: item.content,
				}).then(res => {
					this.page = 1
					this.getMessageList()
				})
			},
			//获取消息列表
			getMessageList(){
				message.getMessageList({
					page: this.page,
					size: this.size,
					conversationId: this.conversationId
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code == 10000) {
						if(this.page == 1){
							this.messageList = []
						}
						var list= []
						for(var i=res.data.data.list.length-1; i>=0; i--){
							var item = res.data.data.list[i]
							list.push(item)
						}
						this.messageList = [...list, ...this.messageList]
						if(this.page == 1){
							this.$nextTick(()=>{
								// 清空内容框中的内容
								uni.pageScrollTo({
								    scrollTop: 999999,	// 设置一个超大值，以保证滚动条滚动到底部
								    duration: 0
								});
							})
						}else{
							//最关键一步，在数据插入列表，渲染之后，没有滚动到下拉之前位置时，采用相对定位，设置同背景色遮罩层盖住消息
							//设置为9意思是，每次拿十条数据，遮住前十条，用数组循环下标判断从0开始，初始化为-1
							let _this = this;
							_this.showIndex = 9;                
							let scrollMsg = _this.messageList[9];  //数据合并之后，获取10条消息的元素
							_this.$nextTick(function() {
								let view = uni.createSelectorQuery().select('#msg'+scrollMsg.id);
								view.boundingClientRect(res => {
									console.log('#msg'+scrollMsg.id+'距离顶部'+res.top); //获取10条消息的元素距顶部的距离，这就是需要滚动的距离
									uni.pageScrollTo({//回到下拉之前，多展示一条消息
										scrollTop: res.top,
										duration: 0
									});
									_this.showIndex = -1;      //去掉遮罩层
									uni.stopPullDownRefresh(); //结束下拉加载
								}).exec();
							});
						}
						if (res.data.data.next) {
							this.page += 1
						}else{
							this.page = 0
						}
					}
				})
			},
			readMessage(){
				message.readMessage({
					conversationId: this.conversationId
				}).then(res => {
					user.getUserInfo().then(res => {
						if (res.data.code == 10000) {
							this.$storage.setStorageDataSync(this.$keyConfig.userInfo, res.data.data)
						}
					})
				})
			},
			avatarTap(item){
				this.$Router.push({
					name: "itemDetail",
					params: {
						userId: item.id
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$margin: 30rpx;
	$avatar_WH: 80rpx;
	$messageCont_W: 570rpx;
	.messageContent{
		padding-bottom: 100rpx;
		.messageCell{
			display: flex;
			flex-direction: column;
			padding: $margin;
			.main{
				width: 690rpx;
				display: flex;
				flex-direction: row;
				.avatarUrl{
					width: $avatar_WH;
					height: $avatar_WH;
					background-color: #FFFFFF;
					border-radius: 20rpx;
				}
				.messageCont{
					max-width: 430rpx;
					padding: 20rpx;
					background-color: #FFFFFF;
					margin: 0 $margin;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.isMyself{
				flex-direction: row-reverse;
			}
		}
	}
	.greetBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #e153ce;
		color: #FFFFFF;
		text-align: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
	}
	
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 30rpx 0;
	}
	
	.text-area {
		display: flex;
		justify-content: center;
	}
	.pull-content{
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		margin: 80rpx 0;
	}
	.left-msg{
		width: 300rpx;
		border-radius: 10rpx;
		background-color: #9eea6b;
		color: #333;
		font-size: 30rpx;
		padding:20rpx;
	}
	.msg-right{
		justify-content: flex-end;
	}
	.img-box{
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	.absolute-view{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	.show-index{
		display: none;
	}
	.msg-over{
		font-size: 24rpx;
		text-align: center;
		color: #999999;
	}
</style>
